<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>- 维修单</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

		<link href="css/animate.css" rel="stylesheet">
		<link href="css/style.css?v=4.1.0" rel="stylesheet">

	</head>

	<body class="gray-bg">
		<div class="row">
			<div class="col-sm-12">
				<div>
					<el-date-picker style="float: right;" @change="changeTime" v-model="date" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions1"> </el-date-picker>
				</div>
				<br /> <br /> <br />
				<div>
					<el-tabs :tab-position="tabPosition" style="height: 520px;" v-model="type" @tab-click="handleClick">
						<el-tab-pane label="待处理" name="464">

							<div class="wrapper wrapper-content animated fadeInUp">
								<ul class="notes">
									<li v-for="(weixiu,i) in tableData">
										<div>
											<small>{{dateFormate(weixiu.rep_uniontime,1)}}</small>
											<h4>{{weixiu.rep_name}}</h4>
											<p>{{weixiu.rep_describe}}</p>
											<br />
											<br />
											<p>接单人:{{weixiu.user}}</P>
											<p>维修人员:{{weixiu.repuser}}</p>
											
											<a :href="'/weixiuTabledetail?id=' + weixiu.rep_id "><i class="el-icon-search"></i></a>
										</div>
									</li>
								</ul>
							</div>

						</el-tab-pane>
						<el-tab-pane label="执行中" name="461">
							<div class="wrapper wrapper-content animated fadeInUp">
								<ul class="notes">
									<li v-for="(weixiu,i) in tableData">
										<div>
											<small>{{dateFormate(weixiu.rep_uniontime,1)}}</small>
											<h4>{{weixiu.rep_name}}</h4>
											<p>{{weixiu.rep_describe}}</p>
											<br />
											<br />
											<p>接单人:{{weixiu.user}}</P>
											<p>维修人员:{{weixiu.repuser}}</p>
											
											<a :href="'/weixiuTabledetail?id=' + weixiu.rep_id "><i class="el-icon-search"></i></a>
										</div>
									</li>
								</ul>
							</div>
						</el-tab-pane>
						<el-tab-pane label="待客户确认" name="465">
							<div class="wrapper wrapper-content animated fadeInUp">
								<ul class="notes">
									<li v-for="(weixiu,i) in tableData">
										<div>
											<small>{{dateFormate(weixiu.rep_uniontime,1)}}</small>
											<h4>{{weixiu.rep_name}}</h4>
											<p>{{weixiu.rep_describe}}</p>
											<br />
											<br />
											<p>接单人:{{weixiu.user}}</P>
											<p>维修人员:{{weixiu.repuser}}</p>
											
											<a :href="'/weixiuTabledetail?id=' + weixiu.rep_id "><i class="el-icon-search"></i></a>
										</div>
									</li>
								</ul>
							</div>
						</el-tab-pane>
						

<el-tab-pane label="已完成" name="462">
							<div class="wrapper wrapper-content animated fadeInUp">
								<ul class="notes">
									<li v-for="(weixiu,i) in tableData">
										<div>
										<!--{{weixiu}}-->
											<small>{{dateFormate(weixiu.rep_uniontime,1)}}</small>
											<h4>{{weixiu.rep_name}}</h4>
											<p>{{weixiu.rep_describe}}</p>
											<br />
											<br />
											<p>接单人:{{weixiu.user}}</P>
											<p>维修人员:{{weixiu.repuser}}</p>
											
											<a :href="'/weixiuTabledetail?id=' + weixiu.rep_id "><i class="el-icon-search"></i></a>
										</div>
									</li>
								</ul>
							</div>
						</el-tab-pane>
						<el-tab-pane label="全部" name="460">
							<div class="wrapper wrapper-content animated fadeInUp">
								<ul class="notes">
									<li v-for="(weixiu,i) in tableData">
										<div>
											<small>{{dateFormate(weixiu.rep_uniontime,1)}}</small>
											<h4>{{weixiu.rep_name}}</h4>
											<p>{{weixiu.rep_describe}}</p>
											<br />
											<br />
											<p>接单人:{{weixiu.user}}</P>
											<p>维修人员:{{weixiu.repuser}}</p>
											
											<a :href="'/weixiuTabledetail?id=' + weixiu.rep_id "><i class="el-icon-search"></i></a>
										</div>
										
									</li>
								</ul>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>

				<div>
					<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="8" layout="total, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

			</div>
		</div>
		<script>
			var vm = new Vue({
				el: ".col-sm-12",
				data() {
					return {
						tabPosition: 'right',
						pickerOptions1: {
							shortcuts: [{
								text: '今天',
								onClick(picker) {
									picker.$emit('pick', new Date());
								}
							}, {
								text: '昨天',
								onClick(picker) {
									const date = new Date();
									date.setTime(date.getTime() - 3600 * 1000 * 24);
									picker.$emit('pick', date);
								}
							}, {
								text: '一周前',
								onClick(picker) {
									const date = new Date();
									date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
									picker.$emit('pick', date);
								}
							}]
						},
						date: new Date(),
						type: "464", //条件
						currentPage: 1, //当前页
						total: 16, //总记录数
						//表格当前页数据
						tableData: [],
					};
				},
				methods: {
					//从服务器读取数据
					loadData: function() {
					this.tableData = null;
						var iosnn = this;
						//post提交数据
						axios.post("/afterSale/weixiuTablety",
							//参数转换
							Qs.stringify({
								"type": this.type,
								"date": this.date,
								"currentPage": this.currentPage,
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							if(v  != null){
								iosnn.tableData = v.data.list;
								iosnn.total = v.data.total;
								console.log(v.data.list);
							}else{
								window.parent.location.href="";
							}
							
						}).catch(function(e) {
							//alert("出错了"+e);
						});
					},
					handleClick(tab, event) { //条件查询
						//console.log(tab.name,this.date,this.currentPage);
						this.type = tab.name;
						this.loadData();

					},
					handleCurrentChange(val) { //分页查询
						this.currentPage = val;
						this.loadData();
							console.log(this.currentPage);
					},
					changeTime: function(it) { //更改时间
						//alert(it);
						this.date = it;
						this.loadData();
					},
					dateFormate: function(time, i) { //时间格式化
						var date = new Date(time);
						var year = date.getFullYear();
						/* 在日期格式中，月份是从0开始的，因此要加0
						 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
						 * */
						var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
						var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
						var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
						var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
						var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						// 拼接
						if(i == 1) {
							return year + "-" + month + "-" + day;
						} else {
							return hours + ":" + minutes + ":" + seconds;
						}
					},

				},
				mounted() {
					var weixiuTableBy = ${
						weixiuTableBy
					};
					//console.log(weixiuTableBy);
					this.tableData = weixiuTableBy.list;
					this.total = weixiuTableBy.total;

				}
			});
		</script>

		<!-- 全局js -->
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>

		<!-- 自定义js -->
		<script src="js/content.js?v=1.0.0"></script>

	</body>

</html>